//ts 中创建类组件的快捷方式: tcc

import React, { Component } from 'react'
import { createRef } from 'react'
import Son from './Son'
type Props = {

}

interface State {
    num: number,
    username: string
}



export default class Father extends Component<Props, State> {
    // Props 为接收的父组件 传递的props 的类型定义
    // State 定义的类组件中的自身state 的类型
    state = {
        num: 100,
        username: '张三'
    }
    ref1 = createRef<HTMLInputElement>();
    editusernameFn = () => {
        this.setState({
            username: '李四'
        })
    }
    render() {
        console.log('this', this);
        return (
            <div>
                <p onClick={() => {
                    // this.setState({
                    //     num: this.state.num + 1
                    // })
                    this.setState((state) => {
                        return {
                            num: state.num + 1
                        }
                    })

                }}>num: {this.state.num}</p>
                <p>username: {this.state.username}</p>

                {/* 
                    受控组件: value+onChange 语法
                */}
                {/* <p>
                    <input type='text' value={this.state.username} onChange={(e) => {
                        this.setState({
                            username: e.target.value
                        })
                    }} />
                </p> */}
                {/* 
                   非受控组件 :ref+default组合,原生获取表单元素值
                */}
                <p>
                    <input type='text' ref={this.ref1} defaultValue={this.state.username} />
                    <button onClick={() => {
                        //解决对象可能为 "null"方式1:
                        // console.log(this.ref1?.current?.value);
                        //解决对象可能为 "null"方式2: 类型断言
                        console.log((this.ref1.current as HTMLInputElement).value)

                    }}>点击提交</button>
                </p>

                {/* 使用子组件 */}
                <Son username={this.state.username} editusernameFn={this.editusernameFn}></Son>

            </div >
        )
    }
}